<template>
    <div class="light-Ct">
        <div class="item-Cd">
            <div class="light-circle" style="position: relative;" :class="{
                'light-green': item.nodeState == 1,
                'light-red': item.nodeState == 0,
                'light-orange': item.nodeState == 2,
            }">
                {{ item.percent }}
            </div>

            <div class="item-name">
                <div v-if="!isEditing" @click="startEdit" class="pointers">{{ item.nodeName }}</div>
                <el-input v-else v-model="editedName" @blur="finishEdit" @keyup.enter="finishEdit" ref="editInput" />
            </div>

            <div class="operation">
                <a @click="addBrotherItem(index, item)">同级 +</a>
                <span>|</span>
                <a @click="addChildItem(index, item)">子级 +</a>
                <span>|</span>
                <a @click="deleteItem(index, item)">删除</a>
            </div>

            <div class="item-info">
                <p>开始时间: {{ item.nodeStartTime }}</p>
                <p>结束时间: {{ item.nodeEndTime }}</p>
            </div>

            <div style="margin-top: 10px;">id: {{ item.id }}</div>
            <div>nodeState: {{ item.nodeState }}</div>
            <div><a @click="testIntem(index, item)">测试Btn</a></div>
        </div>
        <div v-if="item.children && item.children.length"
            :class="item.children && item.children.length ? 'childItem childItemSon' : 'childItem'">
            <RecursiveItem v-for="(child, childIndex) in item.children" :key="childIndex" :item="child"
                :index="childIndex" @editItem="editItem" @addBrotherItem="addBrotherItem" @addChildItem="addChildItem"
                @deleteItem="deleteItem" @testIntem="testIntem" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import RecursiveItem from './RecursiveItem.vue';

const props = defineProps({
    item: {
        type: Object,
        required: true
    },
    index: {
        type: Number,
        required: true
    }
});

const emit = defineEmits(['testIntem', 'editItem', 'addBrotherItem', 'addChildItem', 'deleteItem', 'showModal', 'toggleLight']);

const isEditing = ref(false);
const editedName = ref(props.item.nodeName);

const startEdit = () => {
    isEditing.value = true;
    onMounted(() => {
        if (isEditing.value && editInput.value) {
            editInput.value.focus();
        }
    });
};

const finishEdit = () => {
    isEditing.value = false;
    if (editedName.value !== props.item.nodeName) {
        emit('editItem', props.index, { ...props.item, nodeName: editedName.value });
    }
};

const testIntem = (index, item) => {
    emit('testIntem', index, item);
};

const editItem = (index, item) => {
    emit('editItem', index, item);
};

const addBrotherItem = (index, item) => {
    emit('addBrotherItem', index, item);
};

const addChildItem = (index, item) => {
    emit('addChildItem', index, item);
};

const deleteItem = (index, item) => {
    emit('deleteItem', index, item);
};

const showModal = (index) => {
    emit('showModal', index);
};

const toggleLight = (name, index) => {
    emit('toggleLight', name, index);
};

const editInput = ref(null);
</script>

<style lang="scss" scoped>
.light-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: gray;
    cursor: pointer;
    line-height: 30px;
    margin: auto;
    color: black;
}

.light-green {
    background-color: green;
}

.light-red {
    background-color: red;
}

.light-orange {
    background-color: orange;
}

.light-gray {
    background-color: gray;
}

.children {
    margin-left: 20px;
}

.draggable {
    cursor: move;
}

.dragging {
    opacity: 0.5;
}

.light-item .childItem {
    display: flex;
}

.item-Cd {
    padding: 10px;
    margin: 0px 10px;
    position: relative;
    min-width: 220px;
}

.item-Cd .item-info {
    font-size: 12px;
    margin-top: 20px;
}

.item-Cd .item-info p {
    margin: 0px;
}

.item-Cd .item-name {
    margin: 10px 0px;
}

.pointers {
    cursor: pointer;
}

.operation {
    a {
        color: var(--el-color-primary);
        cursor: pointer;
    }

    span {
        color: #eee;
        margin: 0px 4px;
    }
}
</style>